<div>
	<yu-panel title="运行任务" v-loading="loading" element-loading-text="任务处理中,请稍后..." class="task-run">
		<yu-row :gutter="24">
			<yu-col :span="5">
				<div class="tree-custom-taskmonitor">
					<yu-button-group>
						<el-button class="btn" @click="runTaskFn" title="运行任务" :disabled="!runFnButton">运行</el-button>
						<el-button class="btn" @click="debugTaskFn" title="调试任务" :disabled="!debugFnButton">调试</el-button>
						<el-button class="btn" @click="selectCycleFn" title="指定运行" :disabled="!debugFnButton">指定</el-button>
						<el-button class="btn" @click="rollbackCycleFn" title="设置时点" :disabled="!debugFnButton">设置</el-button>
					</yu-button-group>
					<yu-input placeholder="作业名称" v-model="filterJobNm"></yu-input>
				</div>
				<yu-xtree ref="refTree" :height="height" @node-click="nodeClickFn" :expand-on-click-node="false" :data-url="treeDataUrl" data-id="currentNodeId"
				 data-label="currentNodeName" data-pid="parentId" :data-async="async" :data-params="param" data-root="0000" style="margin-right: 10px"
				 icon="iconPath" :filter-node-method="filterJob">
				</yu-xtree>
			</yu-col>
			<yu-col :span="19">
				<yu-tabs v-model="typeone" @tab-click="tabClick">
					<yu-tab-pane label="运行任务" name="task" >
							<yu-tabs v-model="mainTag">
									<yu-xform ref="wftRunForm" related-table-name="wftRunRefTable" form-type="search" v-model="searchFormdata">
										<yu-xform-group :column="3">
											<yu-xform-item label="系统名称" placeholder="系统名称" ctype="input" name="appName" :disabled="appNameDisabled"></yu-xform-item>
											<yu-xform-item label="任务名称" placeholder="任务名称" ctype="input" name="groupName" :disabled="groupNameDisabled"></yu-xform-item>
											<yu-xform-item label="任务周期" placeholder="任务周期" ctype="datepicker" name="cyclePnt" value-format="yyyyMMdd"
											 format="yyyyMMdd"></yu-xform-item>
											<yu-xform-item label="任务状态" placeholder="任务状态" ctype="select" name="runState" data-code="USE_TASK_RUN_STATE"></yu-xform-item>
										</yu-xform-group>
									</yu-xform>
									<yu-button-group>
										<yu-button @click="interruptFlowChartList" v-if="runFnButton" >中断</yu-button>
										<yu-button @click="redoFlowChartList" v-if="runFnButton" >续跑</yu-button>
										<yu-button @click="deleteFlowChartList" v-if="runFnButton" >删除</yu-button>
										<yu-button @click="generateEvent" v-if="runFnButton" >跨系统事件生成</yu-button>
									</yu-button-group>
									<div ref="tableBox" style="overflow: auto;">
										<yu-xtable :height="tbHeight" ref="wftRunRefTable" tooltip-effect="light" row-number :data-url="wftRunDataUrl"
										 :pageable="true" @selection-change="selectTask" @sort-change="wftRunSort" @row-dblclick="showTask" selection-type="checkbox">
											<yu-xtable-column label="系统名称" prop="appName" width="100px" sortable="custom" :show-overflow-tooltip="true"></yu-xtable-column>
											<yu-xtable-column label="任务名称" width="200px" :show-overflow-tooltip="true" prop="groupName" sortable="custom">
												<template slot-scope="scope">
													<a style="text-decoration:underline;color:#636CE4 " href="javascipt:void(0);" @click="showTask(scope.row)">{{
														scope.row.groupName }}</a>
												</template>
											</yu-xtable-column>
											<yu-xtable-column label="任务周期" prop="cyclePnt" width="100px" sortable="custom"></yu-xtable-column>
											<yu-xtable-column label="任务号" prop="cycleNo"></yu-xtable-column>
											<yu-xtable-column label="任务状态" prop="runState" width="100px" sortable="custom" data-code="USE_TASK_RUN_STATE"></yu-xtable-column>
											<yu-xtable-column label="成功总数" prop="successCnt" width="100px" sortable="custom">
												<template slot-scope="scope">
													<a style="text-decoration:underline;color:rgb(99, 228, 138) " href="javascipt:void(0);" @click="showTask(scope.row, 'S')">{{
														scope.row.successCnt }}</a>
												</template>
											</yu-xtable-column>
											<yu-xtable-column label="失败总数" prop="failedCnt" width="100px" sortable="custom">
												<template slot-scope="scope">
													<a style="text-decoration:underline;color:rgb(228, 99, 99) " href="javascipt:void(0);" @click="showTask(scope.row, 'F')">{{
														scope.row.failedCnt }}</a>
												</template>
											</yu-xtable-column>
											<yu-xtable-column label="未知总数" prop="unknowCnt" width="100px" sortable="custom">
													<template slot-scope="scope">
														<a style="text-decoration:underline;color:#636CE4 " href="javascipt:void(0);" @click="showTask(scope.row, 'U')">{{
															scope.row.unknowCnt }}</a>
													</template>
											</yu-xtable-column>
											<yu-xtable-column label="预估总数" prop="estCnt" width="130" sortable="custom" :render-header="renderHeader">
												<template slot-scope="scope">
													<a style="text-decoration:underline;color:#636CE4 " href="javascipt:void(0);" @click="showTask(scope.row)">{{
														scope.row.estCnt }}</a>
												</template>
											</yu-xtable-column>
											<yu-xtable-column label="当前总数" prop="currentCnt" width="130" sortable="custom" :render-header="renderHeader">
												<template slot-scope="scope">
													<a style="text-decoration:underline;color:#636CE4 " href="javascipt:void(0);" @click="showTask(scope.row, 'C')">{{
														scope.row.currentCnt }}</a>
												</template>
											</yu-xtable-column>
											<yu-xtable-column label="等待总数" prop="waitCnt" width="100px" sortable="custom">
												<template slot-scope="scope">
													<a style="text-decoration:underline;color:#636CE4 " href="javascipt:void(0);" @click="showTask(scope.row, 'W')">{{
														scope.row.waitCnt }}</a>
												</template>
											</yu-xtable-column>
											<yu-xtable-column label="队列中数" prop="queneCnt" width="100px" sortable="custom">
												<template slot-scope="scope">
													<a style="text-decoration:underline;color:#636CE4 " href="javascipt:void(0);" @click="showTask(scope.row, 'Q')">{{
														scope.row.queneCnt }}</a>
												</template>
											</yu-xtable-column>
											<yu-xtable-column label="执行中数" prop="execCnt" width="100px" sortable="custom">
												<template slot-scope="scope">
													<a style="text-decoration:underline;color:#636CE4 " href="javascipt:void(0);" @click="showTask(scope.row, 'X')">{{
														scope.row.execCnt }}</a>
												</template>
											</yu-xtable-column>
											<yu-xtable-column fixed="right" label="操作" width="200" align='center'>
												<template slot-scope="scope">
													<yu-button @click="showFlowChart(scope.row)" type="primary" size="small" style="margin-left:5px">流程图</yu-button>
													<yu-button @click="redoFlowChart(scope.row)" type="success" size="small" v-if="((scope.row.runState==='I'||scope.row.runState==='S')||(scope.row.runState==='T'&&scope.row.failedCnt!=0))&&runFnButton">续跑</yu-button>
													<yu-button @click="interruptFlowChart(scope.row)" type="warning" size="small" v-if="((scope.row.runState==='C'||scope.row.runState==='R'||scope.row.runState==='T'))&&runFnButton">中断</yu-button>
													<yu-button @click="deleteFlowChart(scope.row)" size="small" v-if="(scope.row.runState==='N' || scope.row.runState==='I'|| scope.row.runState==='S')&&runFnButton"
													 type="danger">删除</yu-button>
												</template>
											</yu-xtable-column>
										</yu-xtable>
									</div>
							</yu-tabs>
					</yu-tab-pane>
					<yu-tab-pane label="任务历史" name="taskHis">
						<yu-tabs v-model="historyTaskLogTag" @tab-click="showHisLineChart">
							<yu-tab-pane label="任务历史信息列表" name="historyTasksLog">
								<yu-xform ref="wftRunFormHis" related-table-name="refTableHis" form-type="search" v-model="searchFormdataHis">
									<yu-xform-group :column="3">
										<yu-xform-item label="系统名称" placeholder="系统名称" ctype="input" name="appName" :disabled="appNameDisabled"></yu-xform-item>
										<yu-xform-item label="任务名称" placeholder="任务名称" ctype="input" name="groupName" :disabled="groupNameDisabled"></yu-xform-item>
										<yu-xform-item label="任务周期" placeholder="任务周期" ctype="datepicker" name="cycleTime" value-format="yyyyMMdd" format="yyyyMMdd"></yu-xform-item>
										<yu-xform-item label="任务号" placeholder="任务号" ctype="input" name="cycleNo"></yu-xform-item>
									</yu-xform-group>
								</yu-xform>
								<div ref="tableBox" style="overflow: auto;">
									<yu-xtable :height="tbHeight" ref="refTableHis" row-number :data-url="dataUrlHis" :pageable="true" @selection-change="selectTask" @sort-change="wftRunSortHis">
										<yu-xtable-column label="系统名称" prop="appName" width="100px" sortable="custom" :show-overflow-tooltip="true"></yu-xtable-column>
										<yu-xtable-column label="任务名称" prop="taskName" width="100px" sortable="custom" :show-overflow-tooltip="true">
											<template slot-scope="scope">
												<a style="text-decoration:underline;color:#636CE4 " href="javascipt:void(0);" @click="showTaskHis(scope.row)">{{ scope.row.taskName }}</a>
											</template>
										</yu-xtable-column>
										<yu-xtable-column label="任务周期" prop="cycleTime" width="100px" sortable="custom" :show-overflow-tooltip="true"></yu-xtable-column>
										<yu-xtable-column label="任务号" prop="cycleNo" :show-overflow-tooltip="true"></yu-xtable-column>
										<yu-xtable-column label="任务状态" prop="errorFlag" data-code="USE_JOB_RUN_STATE" width="100px" sortable="custom" :show-overflow-tooltip="true"></yu-xtable-column>
										<yu-xtable-column label="执行开始时间" prop="beginTimeStr" width="140px" :show-overflow-tooltip="true"></yu-xtable-column>
										<yu-xtable-column label="执行结束时间" prop="endTimeStr" width="140px" :show-overflow-tooltip="true"></yu-xtable-column>
										<yu-xtable-column label="持续时长" prop="durationStr" :show-overflow-tooltip="true"></yu-xtable-column>
										<yu-xtable-column label="操作">
											<template slot-scope="scope">
												<yu-button @click="showFlowChartHis(scope.row)" type="primary" size="small">流程图</yu-button>
											</template>
										</yu-xtable-column>
									</yu-xtable>
								</div>
							</yu-tab-pane>
							<yu-tab-pane label="历史日志统计" name="statisticTasksLog" v-if="isNodeLeaf">
								<el-form-q ref="staticJobRef" :field-data="queryStaticsFields" :buttons="queryStaticsButtons"></el-form-q>
								<yu-row>
									<yu-col :span="24">
										<div id="histaskLineChart" style="width: 100%;height: 600px"></div>
									</yu-col>
								</yu-row>
							</yu-tab-pane>
						</yu-tabs>
					</yu-tab-pane>
				</yu-tabs>
			</yu-col>
		</yu-row>
	</yu-panel>

	<yu-xdialog :title="cycleTitle" :visible.sync="cycleTimeVisible" width="700px" v-loading="cycleLoading">
		<yu-xform ref="refForm" v-model="formdata" label-width="120px">
			<yu-xform-group>
				<yu-xform-item label="系统编号" ctype="input" name="appCode" disabled></yu-xform-item>
				<yu-xform-item label="系统名称" ctype="input" name="appName" disabled></yu-xform-item>
				<yu-xform-item label="任务名称" ctype="input" name="taskName" disabled></yu-xform-item>
				<yu-xform-item label="任务ID" ctype="input" maxlength="64" name="groupCode" hidden></yu-xform-item>
				<yu-xform-item :label="cycleTimeLabel" ctype="datepicker" name="cycleTime" value-format="yyyyMMdd" format="yyyyMMdd" rules="required" ></yu-xform-item>
				<!-- <yu-xform-item :hidden="cycleOpr!=='rollbackCycle'" label="还原周期时点" ctype="datepicker" name="saveValue" value-format="yyyyMMdd"
				 format="yyyyMMdd" rules="required"></yu-xform-item> -->
			</yu-xform-group>
		</yu-xform>
		<div class="yu-grpButton">
			<yu-button @click="cancelFn">取消</yu-button>
			<yu-button type="primary" @click="saveCycleTime">{{cycleTimeBtnLabel}}</yu-button>
		</div>
	</yu-xdialog>

</div>
<style type="text/css">
	.intervalSelectionClass {
		width: 100px;
		height: 20px;
		float: right;
	}

	.tree-custom-taskmonitor {
		border-left: 1px solid #d1dbe5;
		margin-top: 10px;
		margin-right: 10px;
		padding: 0;
	}

	.tree-custom-taskmonitor .yu-toolBar {
		padding: 0;
	}

	.tree-custom-taskmonitor .yu-toolBar>h2 {
		margin: 0;
		padding: 0;
		padding-left: 5px;
	}

	.tree-custom-taskmonitor .el-button-group {
		display: block;
	}

	.tree-custom-taskmonitor .el-button-group .el-button {

		/*    border-width: 0; */
		border-left-width: 1px;
		border-radius: 0;
		width: 25%;
		/*  padding-left: 8px; */
	}

	.tree-custom-taskmonitor .el-button-group .el-button:first-child {
		border-left-width: 0;
		/* padding-left: 8px; */
	}

	.tree-custom-taskmonitor .el-button-group .el-button:last-child {
		border-right: 1px solid #d1dbe5;
		/* border-right-width: 0; */
		/* padding-left: 8px; */
	}

	.tree-custom-taskmonitor .el-tree {
		margin-top: 0;
		margin-right: 0;
		border-width: 0;
		border-top-width: 1px;
	}

	.el-tree input {
		border-radius: none !important;
	}
</style>
